<template>
  <div id="resume">
    <div class="background">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <!-- <a href="www.baidu.com">22222222</a> -->
    <div class="main conWidth j_b_box">
      <aside>
        <div class="user_info">
          <div class="user-box flexbox columnBox">
            <div class="userImg">
              <img :src="imgHost + personalinfo.userImg" alt="" />
            </div>
            <h4 class="userName">{{ personalinfo.userName }}</h4>
            <div class="address">
              {{ personalinfo.address }} |
              {{ personalinfo.occupation || "码农" }}
            </div>
            <div class="link j_b_box">
              <div
                v-for="(item, index) in socialLinks"
                :key="index"
                @mouseenter="enter(item)"
                @mouseleave="leave(item)"
                @click="toLink(item)"
              >
                <p
                  :class="
                    item.isHover && item.onlinelink === '' ? 'display' : ''
                  "
                >
                  <img :src="imgHost + item.linkImg" alt="" />
                  <span class="triangle-up"></span>
                </p>
                <i
                  class="iconfont icon-logo-wechat"
                  v-if="item.linkName === '微信'"
                ></i>
                <i class="iconfont icon-qq" v-if="item.linkName === 'QQ'"></i>
                <i
                  class="iconfont icon-xiaochengxu"
                  v-if="item.linkName === '微博'"
                ></i>
                <i
                  class="iconfont icon-github"
                  v-if="item.linkName === 'github'"
                ></i>
              </div>
            </div>
          </div>
          <div class="download">
            <button>获取该简历</button>
          </div>
        </div>
      </aside>
      <article class="info" ref="article">
        <div class="skill" ref="introduce">
          <h2>个人技能介绍</h2>
          <ul>
            <li v-for="(item, index) in personalinfo.introduce" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
        <div ref="skillList">
          <h2>技能熟练</h2>
          <div class="list-box">
            <ul class="skillList">
              <li v-for="(item, index) of skill" :key="index" class="flexbox">
                <span>{{ item.skillName }}</span>
                <el-progress :percentage="item.percentage" />
              </li>
            </ul>
          </div>
        </div>
        <div ref="work">
          <h2>工作经历</h2>
          <div class="list-box">
            <div v-for="(item, index) in work" :key="index" class="company-box">
              <div class="company flexbox">
                <p>{{ item.corporateName }}</p>
                <span>{{ item.workingTime }}</span>
              </div>
              <div class="position flexbox">
                <span>{{ item.department }}</span>
                <span />
                <span>{{ item.position }}</span>
              </div>
              <div class="content">
                <span>内容：</span> 
                <div v-html="item.jobContent">
                  
                </div>
              </div>
            </div>
          </div>
        </div>
        <div ref="project">
          <h2>项目经验</h2>
          <div class="list-box">
            <div
              v-for="(item, index) in project"
              :key="index"
              class="company-box project flexbox"
            >
              <div class="company-left">
                <div class="company projectNme flexbox">
                  <p>{{ item.projectName }}</p>
                  <span>{{ item.projectTime }}</span>
                </div>
                <div class="position" v-html="item.projectRole"></div>
                <div class="content" style="width: 100%">
                  <span>内容：</span>
                  <p v-html="item.projectContent"></p>
                </div>
              </div>
              <div class="company-right" v-if="item.projectImg">
                <!-- <img :src="imgHost + item.projectImg" alt="" /> -->
                <el-image
                  style="width: 100%; height: 100%"
                  :src="imgHost + item.projectImg"
                  :preview-src-list="[imgHost + item.projectImg]"
                />
              </div>
            </div>
          </div>
        </div>
        <div ref="education">
          <h2>教育背景</h2>
          <div class="list-box">
            <div
              v-for="(item, index) in education"
              :key="index"
              class="company-box cursor"
            >
              <div class="company flexbox">
                <p>{{ item.schoolName }}</p>
                <span>{{ item.time }}</span>
              </div>
              <div class="position flexbox">
                <span>{{ item.major }}</span>
                <span />
                <span>{{ item.education }}</span>
              </div>
              <div class="content"><span>内容：</span> {{ item.content }}</div>
            </div>
          </div>
        </div>
        <ul class="right-icon" ref="nav">
          <li>
            <img :src="imgHost + personalinfo.userImg" alt="" />
          </li>
          <li @click="floorClick('introduce')">
            <i class="iconfont icon-yonghu"></i>
            <p>个人介绍</p>
          </li>
          <li @click="floorClick('skillList')">
            <i class="iconfont icon-zhishi"></i>
            <p>知识技能</p>
          </li>
          <li @click="floorClick('work')">
            <i class="iconfont icon-gongzuojingli"></i>
            <p>工作经历</p>
          </li>
          <li @click="floorClick('project')">
            <i class="iconfont icon-xiangmu"></i>
            <p>项目经历</p>
          </li>
          <li @click="floorClick('education')">
            <i class="iconfont icon-jiaoyu"></i>
            <p>教育经历</p>
          </li>
        </ul>
      </article>
    </div>
  </div>
</template>
<script>
const Header = () => import("@/components/header/header");
import { scrollTo } from "@/scroll-to.js";
import { getTop } from "@/util.js";
export default {
  components: {
    Header,
  },
  data() {
    return {
      work: [],
      skill: [],
      options: [],
      project: [],
      education: [],
      socialLinks: [],
      personalinfo: {},
    };
  },
  computed: {},
  created() {
    this.getResumeInfo();
  },
  mounted() {},
  methods: {
    getResumeInfo() {
      this.$http
        .get("resume/getResume", { params: { userId: 1 } })
        .then((res) => {
          res = res.data;
          this.personalinfo = res.personalinfo;
          if (this.personalinfo.introduce) {
            this.personalinfo.introduce = res.personalinfo.introduce.split(
              /[\n]/
            );
          }
          this.socialLinks = res.socialLinks.map((item) => {
            item.isHover = false;
            return item;
          });
          this.skill = res.skill;
          this.project = res.project;
          this.work = res.work;
          this.education = res.education;
        });
    },
    toLink({ onlinelink }) {
      if (!onlinelink) return;
      window.open(`${onlinelink}`);
    },
    // 移入
    enter(item) {
      item.isHover = true;
    },
    leave(item) {
      item.isHover = false;
    },
    //楼层点击
    floorClick(status) {
      scrollTo(getTop(this.$refs[status]) - 170);
    },
  },
};
</script>
<style scoped lang="less">
@import "./css/resume.css";
#resume {
  width: 100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  .background {
    z-index: -1;
    .left {
      width: 0;
      height: 0;
      border-left: 450px solid transparent;
      border-right: 450px solid transparent;
      border-bottom: 450px solid #ccc;
      transform: rotateZ(-30deg);
      position: fixed;
      left: -230px;
      top: -100px;
      z-index: -1;
    }
    .right {
      border-left: 500px solid transparent;
      border-bottom: 450px solid transparent;
      border-top: 500px solid #c0e3e7;
      position: fixed;
      right: 0;
      top: 0;
      z-index: -1;
    }
  }
  .main {
    align-items: end;
    aside {
      width: 25%;
      .user_info {
        box-shadow: -4px 7px 15px 1px rgba(0, 0, 0, 0.2);
        // position: fixed;
        // left:14%;
        // top: 5%;
      }
      .user-box {
        width: 100%;
        padding: 30px;
        background: #c0e3e7;
        box-sizing: border-box;
        position: relative;
        .userImg {
          width: 200px;
          height: 200px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .userName {
          font-family: "PingFang SC";
          font-size: 25px;
          margin: 10px 0;
          text-align: center;
          font-weight: 900;
        }
        .address {
          text-align: center;
          font-size: 16px;
          color: #757575;
          margin-bottom: 15px;
        }
        .link {
          div {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            // transition: all 0.5s linear 0s;
            &:hover {
              background: #000;
              i {
                color: #fff;
              }
            }
            .triangle-up {
              display: block;
              width: 0;
              height: 0;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 10px solid #fff;
              position: absolute;
              left: 50%;
              bottom: -10px;
              transform: translateX(-50%);
            }
            p {
              position: absolute;
              top: -175px;
              width: 150px;
              height: 160px;
              background: #fff;
              padding: 10px;
              border-radius: 4px;
              display: none;
              transition: all 0.3s linear 0s;
              animation: leave 0.3s forwards;
              box-shadow: -4px 7px 15px 1px rgba(0, 0, 0, 0.2);
              img {
                height: 100%;
                width: 100%;
              }
            }
            i {
              font-size: 28px;
            }
            .display {
              animation: enter 0.3s forwards;
              transition: all 0.3s linear 0s;
              display: block;
            }
          }
        }
      }
      @keyframes enter {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes leave {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      .download {
        background: #fff;
        padding: 30px;
        button {
          display: block;
          text-align: center;
          width: 100%;
          color: #fff;
          background: #333;
          font-size: 14px;
          padding: 12px 35px;
          letter-spacing: 1.5px;
          border-radius: 30px;
        }
      }
    }
    article {
      width: 70%;
      position: relative;
      & > div {
        background: #fff;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        padding: 20px;
        .list-box {
          .company-box {
            padding: 20px 30px;
            position: relative;
            .company-right,
            .company-left {
              flex: 3;
              img {
                width: 50%;
                margin: 10px 0;
              }
            }
            .company-right {
              flex: 2;
              padding: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 100%;
              }
            }
            .company {
              margin-bottom: 20px;
              align-items: flex-end;
              p {
                margin-right: 50px;
                font-weight: 600;
                font-size: 18px;
              }
              span {
                color: #9fa3b0;
                font-size: 14px;
              }
            }
            .position {
              margin: 10px 0;
              span {
                margin-right: 15px;
                &:nth-child(2) {
                  color: #9fa3b0;
                  border-left: 1px solid #9fa3b0;
                  margin: 3px 0;
                  margin-right: 15px;
                }
              }
            }
            .content {
              margin-top: 20px;
              width: 60%;
              color: #61687c;
              font-size: 16px;
              // letter-spacing: 2px;
              line-height: 20px;
              span {
                color: #61687c;
                font-weight: 600;
              }
            }
          }
          .skillList {
            li {
              height: 30px;
              align-items: center;
            }
            span {
              width: 15%;
              font-weight: 600;
              padding-left: 10px;
            }
            .el-progress {
              width: 50%;
            }
          }
        }
      }
      .skill {
        ul {
          list-style: unset;
          margin-left: 20px;
          margin-top: 20px;
        }
        li {
          line-height: 40px;
        }
      }
      .right-icon {
        position: fixed;
        right: 6%;
        top: 5%;
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 70px;
          position: relative;
          cursor: pointer;
          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }
          i {
            font-size: 30px;
            color: #333333;
          }
          &:first-child {
            cursor: default;
          }
          &:nth-child(3),
          &:nth-child(5),
          &:nth-child(2) {
            font-weight: 900;
          }
          &:nth-child(4) {
            i {
              font-size: 40px;
            }
          }
          &:last-child {
            i {
              font-size: 26px;
            }
          }
          p {
            border: 1px solid #333;
            border-radius: 3px;
            position: absolute;
            left: -70px;
            line-height: 22px;
            padding: 0 5px;
            background: #fff;
            font-weight: 500;
            display: none;
          }
          &:hover p {
            display: block;
          }
        }
      }
    }
  }
}
</style>